<template>
    <el-container class="homeContainer">
        <el-aside :width="loggle ? '60px' : '235px'">
             <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                :router="true"
                :unique-opened="true"
                :collapse="loggle"
                active-text-color="#ffd04b">
                <div class="asidehead">
                  <div class="img">
                    <img src="http://windhunter.cn:7001/public/dist/static/logo.f0355d39.svg" alt="">
                  </div>
                  <div class="text">
                    管理员你好~~
                  </div>
                </div>
                <el-button class="loggle" @click="asidControl">|||</el-button>
                <el-submenu :index="item.id + ''"  v-for="item in menuList" :key="item.id">
                  <template slot="title">
                    <i :class="item.ico"></i>
                    <span>{{ item.title }}</span>
                  </template>
                  <el-menu-item-group>
                    <template slot="title">{{ item.title }}功能分类</template>
                    <el-menu-item :index="it.path + ''" v-for="it in item.List" :key="it.id">
                      <i :class="it.ico"></i>
                      <span>{{ it.title }}</span>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
             </el-menu>
        </el-aside>
        <el-container>
            <el-header class="Homehead">
                <div class="head">
                    <i class="el-icon-s-unfold"></i>
                    <span>机房排课管理系统</span>
                </div>
                <el-dropdown class="el-dropdown-link">
                  <span>
                      <i class="el-icon-user"></i>
                  </span>
                  <span class="el-dropdown-link1">
                    李昌柏
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus">个人信息</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus">返回主页</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        { id: 100, path: '/add', title: '课程导入', List: [{ id: 101, path: '/addcourse', title: '添加理论课程' }, { id: 102, path: '/addcourse2', title: '添加上机课程' }] },
        { id: 200, path: '/select', title: '课表查询', List: [{ id: 201, path: '/numberselect', title: '教工号码查询' }, { id: 202, path: '/classselect', title: '机房号码查询' }] },
        { id: 300, path: '/pernalmessage', title: '我的', List: [{ id: 301, path: '/pernalmessage', title: '个人信息管理' }] }
      ],
      loggle: false
    }
  },
  created () {
    //  this.getMenuList()
    // this.$router.push('/managemain')
  },
  methods: {
    logout () {
      // window.sessionStorage.clear()
      this.$router.push('/classroom')
    },
    async getMenuList () {
      const { data: res } = await this.$http.post('menus')
      if (res.status !== 200) return this.$message.error('获取菜单列表失败')
      this.menuList = res.menus
    },
    asidControl () {
      this.loggle = !this.loggle
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style>
.loggle{
  text-align: center;
  color: white;
}
.el-icon-s-unfold{
  position: relative;
  top: 20px;
  left: 20px;
}
.head span{
    font-weight: 550;
    opacity: 0.8;
    position: relative;
    left: 30px;
    top: 20px;
}
</style>

<style lang="less" scoped>
.homeContainer {
    height: 100%;
}
.el-header {
    background-color:white;
    display: flex;
    justify-content: space-between;
    padding-left: 0%;
    color: #606266;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.el-aside {
  background-color: #303133;
  overflow: hidden;
  .el-button{
    background-color: #606266;
    position: relative;
    top: -10px;
    font-size: 20px Extra large;
    border-style: none;
    color: white;
  }
  .asidehead{
    height: 60px;
  }
  .img img{
    height: 50px;
    position: relative;
    top: 5px;
    left: 5px;
  }
  .text{
    position: relative;
    left: 60px;
    top: -40px;
    font-size: 24px;
    color: white;
  }
  .el-menu {
      border-right: none;
      background-color: #303133;
  }
}
.el-main {
    background-color: #E9EEF3;
  }
.el-button{
    position: relative;
    top: -10px;
    margin-top: 10px;
    font-size: 15px;
    justify-content: center;
    text-align: center;
    height: 60%;
}
.asidControl{
    background-color: #303133;
    height:25px;
    font-size: 20px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
.el-submenu {
    span {
      font-size: 15px;
    }
}
.el-menu-item {
    span{
        font-size: 15px;
    }
}
.el-dropdown {
  font-size: 20px;
  position: relative;
  top: 15px;
}
</style>
